<template>
  <div class="big_6">
    <div class="top_2">
      <p><span>充值</span></p>
    </div>
    <div>
      <div v-if="hide_big">
        <div class="cnet" v-if="hides">
          <div class="component-wrap">
            <el-form ref="form" :model="form">
              <section
                style="
                  display: flex;
                  align-items: center;
                  margin-bottom: 35px;
                  margin-top: 16px;
                "
              >
                <el-dropdown trigger="click" placement="bottom-start">
                  <el-input
                    placeholder="请选择充值银行卡"
                    v-model="bank"
                    style="width: 260px"
                  >
                    <i slot="suffix" class="el-icon-arrow-down"></i>
                  </el-input>
                  <el-dropdown-menu slot="dropdown" class="dropdown-container">
                    <el-radio-group
                      v-model="radio"
                      class="radio-container"
                      @change="setBank"
                    >
                      <el-dropdown-item
                        v-for="(item, index) in form"
                        :key="index"
                      >
                        <el-radio :label="index" class="el_radio">
                          <span>{{ item.bank_card_code }}</span
                          >&nbsp;&nbsp;&nbsp;
                          <span>{{ item.bank_card_name }}</span>
                        </el-radio>
                      </el-dropdown-item>
                    </el-radio-group>
                  </el-dropdown-menu>
                </el-dropdown>
              </section>

              <div class="content_center_2201">
                <el-input
                  v-model="t_money"
                  class="el_input_1"
                  placeholder="充值金额                                        元"
                ></el-input>
              </div>

              <div class="content_center_223">
                <el-form-item prop="password">
                  <el-input
                    prop="password"
                    v-model="t_pwd"
                    class="el_input_12"
                    placeholder="交易密码"
                  ></el-input>
                </el-form-item>
              </div>

              <div class="content_center_223">
                <el-input
                  v-model="t_code"
                  class="el_input_120"
                  placeholder="短信验证码"
                  prefix-icon="el-icon-user"
                ></el-input>
               <button
                @click.prevent="getShortMessageCode()"
                :class="{code_btn:ppt,code_btn1:!ppt}"
                :disabled="!show"
              >
                <span v-show="show">获取验证码</span>
                <span v-show="!show">{{ count }} 秒后可重发</span>
              </button>
              </div>
            </el-form>
          </div>
          <div class="component-wrap_2">
            <el-button type="success" plain @click="look2(id)"
              >支付宝支付</el-button
            >
          </div>
          <div class="component-wrap_24">
            <p><span>手续费0元</span></p>
          </div>

          <div>
            <el-button class="btn_10" type="success" plain @click="next()"
              >下一步</el-button
            >
          </div>
        </div>

        <div class="success_1" v-if="hidesFalse">
          <div class="success_1_cneter">
            <p>
              <span class="chongzhi_2">您已申请充值成功</span>
            </p>
            <p class="chongzhi_p_2">
              <span>充值高峰期，到账时间会延迟，请以实际到账时间为准</span>
            </p>

            <el-button
              class="success_btn_10"
              type="danger"
              plain
              @click="nextRecharge()"
              >继续充值</el-button
            >
          </div>
        </div>
      </div>

      <div class="zfb_show" v-if="zfbFalse">
        <div class="content_center_122">
          <el-input
            v-model="total_amount"
            class="el_input_1"
            placeholder="充值金额                                        元"
          ></el-input>
        </div>
        <el-button class="zfb_btn_10" type="success" plain @click="zfb_sb()"
          >下一步</el-button
        >
      </div>

      <div class="component-wrap_245" v-if="font_date">
        <p><span>预计1分钟到账，以实际到账时间为准</span></p>
      </div>
    </div>
  </div>
</template>

<script>
import axios from "axios";
export default {
  name: "AccountBank",
  props: {},
  data() {
    return {
      bank: "",
      total_amount: "",
      hidesFalse: false,
      hides: true,

      username: "",
      password: "",

      checked: false,
      show: true,
      user_phone: "",
      timer: 0,
      count: 0,
      ppt: true, //点击时改变样式
      show: true,
      radio: "",
      form: {
        bank_card_name: "",
        bank_card_img: "",
        bank_card_code: "",
        bank_card_transaction_pwd: "",
        bank_card_id: "",
      },
      hide_big: true,
      zfbFalse: false,
      zfb: false,
      font_date: true,

      withdrawMoney: "",
      t_code: "",
      t_pwd: "",
      verificationCode: "",
      t_money: "",
    };
  },
  created() {
    this.initialize();
  },
  mounted() {},
  methods: {
    //调支付宝接口
    zfb_sb() {
      window.location.href =
        "http://localhost:8888/aliPay?total_amount=" + this.total_amount + "";
    },
    //下一步
    next() {
      if (this.bank != null && this.bank != "") {
        if (this.t_money != null && this.t_money != "" && this.t_money.length<5) {
          if (
            this.t_pwd != null &&
            this.t_pwd != "" &&
            this.t_pwd.length == 6
          ) {
            if (this.t_code != null && this.t_code != "") {
              axios({
                url: "/api/user/bankCardTopUp",
                params: {
                  t_code: this.t_code, //验证码
                  t_pwd: this.t_pwd, //密码
                  t_money: this.t_money, //支付金额
                  t_bank_code: this.bank, //银行卡号
                },
              }).then((res) => {
                if (res.data.code == 200) {
                  console.log(res);
                  this.hides = false;
                  this.hidesFalse = true;
                  this.font_date = false;
                  this.$message({
                    type: "success",
                    message: res.data.message,
                  });
                  return;
                } else {
                  this.$message({
                    type: "warning",
                    message: res.data.message,
                  });
                  return;
                }
              });
            } else {
              this.$message({
                message: "请输入验证码",
                type: "warning",
              });
              return;
            }
          } else {
            this.$message({
              message: "请输入正确的支付密码",
              type: "warning",
            });
            return;
          }
        } else {
          this.$message({
            message: "请输入要充值的金额并且不能超过一万元",
            type: "warning",
          });
          return;
        }
      } else {
        this.$message({
          message: "请选择银行卡",
          type: "warning",
        });
        return;
      }
    },

    //跳支付宝页面
    look2(val) {
      this.hide_big = false;
      this.zfbFalse = true;
      this.font_date = false;
    },
    //继续充值
    nextRecharge() {
      this.hidesFalse = false;
      this.hides = true;
    },

    // 获取短信验证码
    getShortMessageCode() {
      this.ppt = !this.ppt;
      axios({
        url: "/api/user/smsverification",
      }).then((res) => {
        console.log(res);
        // this.form=res.data.data;
      });
      // 验证码倒计时
      if (!this.timer) {
        console.log(this.timer);
        this.count = 60;
        this.show = false;
        this.timer = setInterval(() => {
          if (this.count > 0 && this.count <= 60) {
            this.count--;
          } else {
            this.show = true;
            clearInterval(this.timer);
            this.timer = null;
            this.ppt = !this.ppt;
          }
        }, 1000);
      }
    },

    initialize() {
      axios({
        url: "/api/user/findBankCardByPhone",
      }).then((res) => {
        console.log(res.data.data);
        this.form = res.data.data;
        console.log(this.form);
      });
    },

    setBank(e) {
      console.log(e);
      this.bank = this.form[Number(e)].bank_card_code;
    },
  },
};
</script>

<style scoped lang="scss">

.el-message {
  height: 50px !important;
  top: 65% !important;
  margin-top: -500px !important;
  z-index: 100000002 !important;
}
.content_center_122 {
  width: 100%;
  height: 100%;
  margin-top: -10px;
  margin-bottom: 28px;
  float: left;
}

.zfb_btn_10 {
  width: 40%;
  margin: 0 auto;
  float: left;
  margin-top: -110px;
  margin-left: 60px;
  margin-bottom: 20px;
}
.zfb_show {
  width: 30%;
  height: 200px;
  // background-color: aquamarine;
  // margin: 100px auto-2px;;
  margin-left: 200px;
  margin-top: 100px;
}
.chongzhi_p_2 {
  margin-top: 20px;
  font-size: 14px;
}

.success_btn_10 {
  width: 40%;
  margin: 0 auto;
  // float: left;
  margin-top: 20px;
  // margin-left: 90px;
  // margin-bottom: 20px;
}

.chongzhi_2 {
  font-size: 20px;
}

.success_1_cneter {
  width: 70%;
  height: 200px;
  // background-color: aqua;
  margin: 0 auto;
  text-align: center;
  padding-top: 50px;
}
.success_1 {
  width: 100%;
  height: 300px;
  // background-color: aqua;
  // margin: 0 auto;
  align-content: center;
}
.big_6 {
  height: 750px;
}

.code_btn {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid red;
  background-color: red;
  -webkit-border-radius: 5px;
}
.code_btn1 {
  height: 37px;
  background-color: red;
  color: white;
  border: 1px solid #cccccc;
  background-color: #cccccc;
  -webkit-border-radius: 5px;
}
.el_input_120 {
  width: 50%;
}
.el_input_12 {
  width: 94%;
}
.el_input_123 {
  width: 94%;
}
.el_input_1 {
  width: 94%;
}
.content_center_2233 {
  width: 100%;
  height: 100%;
  margin-top: -10px;
  margin-bottom: 10px;
}
.top_2 {
  margin-left: 30px;
  width: 93%;
  border-radius: 7px;
  height: auto;
  /* background-color: antiquewhite; */
  border-bottom: 2.3px solid #efefef;
  line-height: 4;
  font-size: 18px;
}
.content_center_223 {
  width: 100%;
  height: 100%;
  // margin-top: -10px;
  margin-bottom: 10px;
}
.content_center_2211 {
  float: left;
  width: 50%;
  height: 100%;
  margin-top: -10px;
  margin-bottom: 10px;
}
.content_center_2201 {
  width: 100%;
  height: 100%;
  margin-top: -10px;
  margin-bottom: 28px;
  float: left;
}
.content_center_22 {
  width: 100%;
  height: 100%;
  margin-top: -10px;
  margin-bottom: 28px;
  float: left;
}
.btn_10 {
  width: 40%;
  margin: 0 auto;
  float: left;
  margin-top: -20px;
  margin-left: 90px;
  margin-bottom: 20px;
}

.cnet {
  width: 70%;
  height: 295px;
  // background-color: red;
  margin: 0 auto;
  float: left;
  margin-left: 120px;
}
.label_font {
  width: 120px;
  margin-left: 50px;
}
.el_radio {
  width: 100%;
}
.component-wrap {
  width: 42%;
  height: 300px;
  float: left;
  margin-top: 20px;
  margin-left: 90px;
  /deep/.el-dropdown {
    width: calc(100% - 170px);
  }
}
.span_code {
  //   margin-left: -40px;
  //   margin-top: 166px;
  float: left;
  font-size: 14px;
  color: #ccbebe;
}
.component-wrap_245 {
  margin-left: 225px;
  margin-top: 67px;
  float: left;
  font-size: 14px;
  color: #ccbebe;
}
.component-wrap_24 {
  margin-left: -110px;
  margin-top: 166px;
  float: left;
  font-size: 14px;
  color: #ccbebe;
}
.component-wrap_2 {
  margin-left: 10px;
  margin-top: 37px;
  float: left;
  font-size: 14px;
  color: black;
}
.dropdown-container {
  display: flex;
  flex-wrap: wrap;
  width: 254px;

  /deep/.el-radio {
    display: flex;
    align-items: center;
    .el-radio__label {
      display: flex;
      align-items: center;
      font-size: 14px;
      padding-left: 5px;
      img {
        width: 80px;
        height: 60px;
      }
    }
  }
}
.radio-container {
  display: flex;
  flex-wrap: wrap;
  /deep/.el-dropdown-menu__item {
    margin: 10px;
    padding: 0;
  }
}

/deep/.el-input__suffix-inner {
  line-height: 40px;
}
</style>

